<template>
  <div class="tab-item" @click="onItemClick">
    <router-link :to="item.path">
    <div class="tab-item-icon">
      <icon :name="item.icon" scale="2.5" :fillColor='fillColor'></icon>
    </div>
    <div class="tab-item-title" :class="selText">{{item.title}}</div>
    </router-link>
  </div>
</template>
<script>
export default {
  computed: {
    fillColor () {
      return this.item.value === this.$parent.value ? '#e54847' : ''
    },
    selText () {
      return {'tab-item-title-sel': this.item.value === this.$parent.value}
    }
  },
  props: {
    item: Object
  },
  methods: {
    onItemClick () {
      this.$parent.value = this.item.value
      // this.$emit('itemClick', this.item.value)
    }
  }
}
</script>
<style lang="scss">
@import "../../../styles/common/var";
.tab-item{
  flex: 1;
  text-align: center;
  flex-direction: column;
  &-icon{
    flex: 1;
    height: 60px;
    padding-top: 5px
  }
  &-title{
    flex: 1;
    height: 44px;
    font-size: 22px;
    color: $--color-darkgray;
    &-sel{
      color: $--color-red;
    }
  }
}
</style>
